<v-app>
  <v-speed-dial v-model="menu" fixed top right direction="bottom" style="user-select: none;">
    <template v-slot:activator>
      <v-btn
        @click.native.stop.prevent="menu=!menu"
        @touchstart.native.stop.prevent="menu=!menu"
        fab
        depressed
        color="primary"
        :style="{width:size+'px', height:size+'px'}"
      >
        <v-icon v-if="menu" :size="size * 0.6">close</v-icon>
        <v-icon v-else :size="size * 0.6">menu</v-icon>
      </v-btn>
    </template>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
      @touchstart.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/'"
    >
      <v-icon :size="size * 0.55" color="primary">games</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="tune=true;menu=false;"
      @touchstart.native.stop.prevent="tune=true;menu=false;"
    >
      <v-icon :size="size * 0.55" color="primary">tune</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      :color="cuber.mirror?'primary':'white'"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="cuber.mirror=!cuber.mirror;"
      @touchstart.native.stop.prevent="cuber.mirror=!cuber.mirror;"
    >
      <v-icon :size="size * 0.55" :color="cuber.mirror?'white':'primary'">flip</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
      @touchstart.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
    >
      <v-icon :size="size * 0.55" color="primary">code</v-icon>
    </v-btn>
  </v-speed-dial>
  <div v-resize="resize" style="padding:0%;background-color:#C0C0C0;user-select: none;touch-action: none;">
    <div ref="cuber"></div>
    <div style="margin:0%;padding:0%;background-color:#FFFFFF;" :style="{width:width + 'px', height:'240px'}">
      <v-container fluid grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex xs12>
            <v-text-field
              style="text-transform:none;margin-top: 6px;margin-left: 8px;margin-right: 8px;"
              dense
              class="title"
              single-line
              hide-details
              outlined
              :disabled="recording || playing"
              :append-icon="scene == ''?'':'clear'"
              @click:append="scene = ''"
              v-model="scene"
              label="scene"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12>
            <v-text-field
              style="text-transform:none;margin-top: 6px;margin-left: 8px;margin-right: 8px;"
              dense
              class="title"
              single-line
              hide-details
              outlined
              :disabled="recording || playing"
              :append-icon="action == ''?'':'clear'"
              @click:append="action = ''"
              v-model="action"
              label="action"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
            <v-slider
              style="margin: 0%"
              readonly
              hide-details
              :thumb-label="progress!=0?'always':false"
              ticks="always"
              v-model="progress"
              :max="actions.length"
            >
              <template v-slot:thumb-label>{{progress==0?'#':actions[progress - 1].value}}</template>
            </v-slider>
          </v-flex>
          <v-flex xs2.4>
            <v-btn
              block
              text
              large
              :disabled="recording || playing"
              @click.native.stop.prevent="snap"
              @touchstart.native.stop.prevent="snap"
              style="margin: 0%; padding: 0%;"
            >
              <v-icon large>camera_alt</v-icon>
            </v-btn>
          </v-flex>
          <v-flex xs2.4>
            <v-btn
              block
              text
              large
              :disabled="progress==0 || recording"
              @click.native.stop.prevent="backward"
              @touchstart.native.stop.prevent="backward"
              style="margin: 0%; padding: 0%;"
            >
              <v-icon large>fast_rewind</v-icon>
            </v-btn>
          </v-flex>
          <v-flex xs2.4>
            <v-btn
              block
              text
              large
              :disabled="action == '' || recording"
              @click.native.stop.prevent="toggle"
              @touchstart.native.stop.prevent="toggle"
              style="margin: 0%; padding: 0%;"
            >
              <v-icon large>{{progress == actions.length?'replay':(playing?'pause':'play_arrow')}}</v-icon>
            </v-btn>
          </v-flex>
          <v-flex xs2.4>
            <v-btn
              block
              text
              large
              :disabled="progress == actions.length || recording"
              @click.native.stop.prevent="forward"
              @touchstart.native.stop.prevent="forward"
              style="margin: 0%; padding: 0%;"
            >
              <v-icon large>fast_forward</v-icon>
            </v-btn>
          </v-flex>
          <v-flex xs2.4>
            <v-btn
              block
              text
              large
              :disabled="action == '' || playing"
              @click.native.stop.prevent="film"
              @touchstart.native.stop.prevent="film"
              style="margin: 0%; padding: 0%;"
            >
              <v-icon large>{{recording?'stop':'videocam'}}</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
  </div>
  <v-bottom-sheet v-model="tune">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;">
      <v-container fluid grid-list-md text-xs-center>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.scale" always-dirty thumb-label="always" max="100" min="0" label="大小"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.perspective" always-dirty thumb-label="always" max="100" min="0" label="透视"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.angle" always-dirty thumb-label="always" max="100" min="0" label="左右"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.gradient" always-dirty thumb-label="always" max="100" min="0" label="上下"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="pixel" always-dirty thumb-label="always" max="10" min="6" label="输出">
            <template v-slot:thumb-label>{{Math.pow(2, pixel)}}</template>
          </v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-btn @click.native.stop.prevent="option.reset();pixel=9;" @touchstart.native.stop.prevent="option.reset();pixel=9;" outlined color="red">
            重置
          </v-btn>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
</v-app>
